<template>
	<view class="pay-page">
		<!-- 顶部导航 -->
		<view class="nav-header">
			<view class="nav-back" @click="goBack">
				<u-icon name="arrow-left" size="20" color="#333"></u-icon>
			</view>
			<text class="nav-title">订单支付</text>
			<view class="nav-right"></view>
		</view>
		
		<scroll-view class="pay-content" scroll-y>
			<!-- 支付金额 -->
			<view class="amount-section">
				<view class="amount-info">
					<text class="amount-label">支付金额</text>
					<text class="amount-value">¥{{ orderInfo.totalAmount }}</text>
				</view>
				<view class="order-info">
					<text class="order-no">订单号：{{ orderInfo.orderNo }}</text>
					<text class="order-time">下单时间：{{ orderInfo.createTime }}</text>
				</view>
			</view>
			
			<!-- 支付方式 -->
			<view class="payment-section">
				<view class="section-header">
					<text class="header-title">选择支付方式</text>
				</view>
				<view class="payment-list">
					<view 
						class="payment-item" 
						:class="{ active: selectedPayment === payment.type }"
						v-for="payment in paymentMethods" 
						:key="payment.type"
						@click="selectPayment(payment.type)"
					>
						<view class="payment-left">
							<image :src="payment.icon" class="payment-icon" mode="aspectFit"></image>
							<view class="payment-info">
								<text class="payment-name">{{ payment.name }}</text>
								<text class="payment-desc" v-if="payment.desc">{{ payment.desc }}</text>
							</view>
						</view>
						<view class="payment-right">
							<u-icon 
								:name="selectedPayment === payment.type ? 'checkmark-circle-fill' : 'radio-button-off'" 
								:color="selectedPayment === payment.type ? '#27B387' : '#ddd'" 
								size="20"
							></u-icon>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 优惠券 -->
			<view class="coupon-section">
				<view class="coupon-item" @click="selectCoupon">
					<view class="coupon-left">
						<u-icon name="ticket" size="20" color="#ff4757"></u-icon>
						<text class="coupon-text">优惠券</text>
					</view>
					<view class="coupon-right">
						<text class="coupon-value" v-if="selectedCoupon">-¥{{ selectedCoupon.amount }}</text>
						<text class="coupon-placeholder" v-else>{{ availableCoupons.length }}张可用</text>
						<u-icon name="arrow-right" size="16" color="#999"></u-icon>
					</view>
				</view>
			</view>
			
			<!-- 费用明细 -->
			<view class="detail-section">
				<view class="section-header">
					<text class="header-title">费用明细</text>
				</view>
				<view class="detail-list">
					<view class="detail-item">
						<text class="detail-label">商品总价</text>
						<text class="detail-value">¥{{ orderInfo.goodsAmount }}</text>
					</view>
					<view class="detail-item" v-if="orderInfo.discountAmount > 0">
						<text class="detail-label">商品优惠</text>
						<text class="detail-value discount">-¥{{ orderInfo.discountAmount }}</text>
					</view>
					<view class="detail-item" v-if="selectedCoupon">
						<text class="detail-label">优惠券</text>
						<text class="detail-value discount">-¥{{ selectedCoupon.amount }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">运费</text>
						<text class="detail-value">{{ orderInfo.shippingFee > 0 ? '¥' + orderInfo.shippingFee : '免运费' }}</text>
					</view>
				</view>
			</view>
			
			<!-- 支付协议 -->
			<view class="agreement-section">
				<view class="agreement-item" @click="toggleAgreement">
					<u-icon 
						:name="agreedPayment ? 'checkmark-circle-fill' : 'radio-button-off'" 
						:color="agreedPayment ? '#27B387' : '#ddd'" 
						size="16"
					></u-icon>
					<text class="agreement-text">我已阅读并同意</text>
					<text class="agreement-link" @click.stop="viewAgreement">《支付服务协议》</text>
				</view>
			</view>
			
			<!-- 安全提示 -->
			<view class="security-section">
				<view class="security-header">
					<u-icon name="shield-checkmark" size="16" color="#27B387"></u-icon>
					<text class="security-title">安全保障</text>
				</view>
				<view class="security-list">
					<view class="security-item">
						<u-icon name="checkmark" size="12" color="#27B387"></u-icon>
						<text class="security-text">256位SSL加密传输</text>
					</view>
					<view class="security-item">
						<u-icon name="checkmark" size="12" color="#27B387"></u-icon>
						<text class="security-text">银行级安全防护</text>
					</view>
					<view class="security-item">
						<u-icon name="checkmark" size="12" color="#27B387"></u-icon>
						<text class="security-text">7×24小时监控</text>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<!-- 底部支付栏 -->
		<view class="bottom-pay">
			<view class="pay-info">
				<text class="pay-label">实付款：</text>
				<text class="pay-amount">¥{{ finalAmount }}</text>
			</view>
			<button class="pay-btn" :disabled="!canPay" @click="submitPay">
				<text class="btn-text">{{ payBtnText }}</text>
			</button>
		</view>
		
		<!-- 优惠券选择弹窗 -->
		<u-popup v-model="showCouponModal" mode="bottom" height="60%" border-radius="12">
			<view class="coupon-modal">
				<view class="modal-header">
					<text class="modal-title">选择优惠券</text>
					<view class="modal-close" @click="hideCouponModal">
						<u-icon name="close" size="20" color="#999"></u-icon>
					</view>
				</view>
				<scroll-view class="coupon-list" scroll-y>
					<view class="coupon-option" @click="selectCouponItem(null)">
						<view class="option-left">
							<text class="option-text">不使用优惠券</text>
						</view>
						<u-icon 
							:name="!selectedCoupon ? 'checkmark-circle-fill' : 'radio-button-off'" 
							:color="!selectedCoupon ? '#27B387' : '#ddd'" 
							size="20"
						></u-icon>
					</view>
					<view 
						class="coupon-option" 
						v-for="coupon in availableCoupons" 
						:key="coupon.id"
						@click="selectCouponItem(coupon)"
					>
						<view class="option-left">
							<view class="coupon-card">
								<view class="coupon-amount">¥{{ coupon.amount }}</view>
								<view class="coupon-condition">{{ coupon.condition }}</view>
							</view>
							<view class="coupon-info">
								<text class="coupon-name">{{ coupon.name }}</text>
								<text class="coupon-expire">有效期至：{{ coupon.expireTime }}</text>
							</view>
						</view>
						<u-icon 
							:name="selectedCoupon && selectedCoupon.id === coupon.id ? 'checkmark-circle-fill' : 'radio-button-off'" 
							:color="selectedCoupon && selectedCoupon.id === coupon.id ? '#27B387' : '#ddd'" 
							size="20"
						></u-icon>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		
		<!-- 支付中遮罩 -->
		<u-loading-page :loading="paying" loading-text="支付处理中..."></u-loading-page>
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderId: '',
			selectedPayment: 'wechat',
			selectedCoupon: null,
			agreedPayment: true,
			showCouponModal: false,
			paying: false,
			
			// 订单信息
			orderInfo: {
				id: 1,
				orderNo: 'YP202401151030001',
				createTime: '2024-01-15 10:30:00',
				goodsAmount: '11998.00',
				discountAmount: '200.00',
				shippingFee: '0.00',
				totalAmount: '11798.00'
			},
			
			// 支付方式
			paymentMethods: [
				{
					type: 'wechat',
					name: '微信支付',
					desc: '推荐使用',
					icon: '/static/payment/wechat.png'
				},
				{
					type: 'alipay',
					name: '支付宝',
					desc: '安全便捷',
					icon: '/static/payment/alipay.png'
				},
				{
					type: 'balance',
					name: '余额支付',
					desc: '余额：¥1,234.56',
					icon: '/static/payment/balance.png'
				}
			],
			
			// 可用优惠券
			availableCoupons: [
				{
					id: 1,
					name: '新用户专享券',
					amount: '50',
					condition: '满500元可用',
					expireTime: '2024-02-15'
				},
				{
					id: 2,
					name: '品类优惠券',
					amount: '100',
					condition: '满1000元可用',
					expireTime: '2024-02-20'
				},
				{
					id: 3,
					name: '满减优惠券',
					amount: '200',
					condition: '满2000元可用',
					expireTime: '2024-02-25'
				}
			]
		}
	},
	onLoad(options) {
		if (options.orderId) {
			this.orderId = options.orderId
			this.loadOrderInfo()
		}
	},
	computed: {
		// 最终支付金额
		finalAmount() {
			let amount = parseFloat(this.orderInfo.totalAmount)
			if (this.selectedCoupon) {
				amount -= parseFloat(this.selectedCoupon.amount)
			}
			return amount.toFixed(2)
		},
		
		// 是否可以支付
		canPay() {
			return this.selectedPayment && this.agreedPayment && !this.paying
		},
		
		// 支付按钮文本
		payBtnText() {
			if (this.paying) {
				return '支付中...'
			}
			if (!this.selectedPayment) {
				return '请选择支付方式'
			}
			if (!this.agreedPayment) {
				return '请同意支付协议'
			}
			return `立即支付 ¥${this.finalAmount}`
		}
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack()
		},
		
		// 加载订单信息
		loadOrderInfo() {
			// TODO: 调用订单信息接口
			console.log('加载订单信息:', this.orderId)
		},
		
		// 选择支付方式
		selectPayment(type) {
			this.selectedPayment = type
		},
		
		// 选择优惠券
		selectCoupon() {
			this.showCouponModal = true
		},
		
		// 隐藏优惠券弹窗
		hideCouponModal() {
			this.showCouponModal = false
		},
		
		// 选择优惠券项
		selectCouponItem(coupon) {
			this.selectedCoupon = coupon
			this.hideCouponModal()
		},
		
		// 切换协议同意状态
		toggleAgreement() {
			this.agreedPayment = !this.agreedPayment
		},
		
		// 查看协议
		viewAgreement() {
			uni.navigateTo({
				url: '/pages/common/webview?url=https://example.com/payment-agreement'
			})
		},
		
		// 提交支付
		submitPay() {
			if (!this.canPay) {
				return
			}
			
			this.paying = true
			
			// 根据支付方式调用不同的支付接口
			switch (this.selectedPayment) {
				case 'wechat':
					this.wechatPay()
					break
				case 'alipay':
					this.alipay()
					break
				case 'balance':
					this.balancePay()
					break
			}
		},
		
		// 微信支付
		wechatPay() {
			// TODO: 调用微信支付接口
			uni.requestPayment({
				provider: 'wxpay',
				timeStamp: String(Date.now()),
				nonceStr: 'randomString',
				package: 'prepay_id=test',
				signType: 'MD5',
				paySign: 'testSign',
				success: res => {
					this.paySuccess()
				},
				fail: err => {
					this.payFail(err)
				}
			})
		},
		
		// 支付宝支付
		alipay() {
			// TODO: 调用支付宝支付接口
			uni.requestPayment({
				provider: 'alipay',
				orderInfo: 'test_order_info',
				success: res => {
					this.paySuccess()
				},
				fail: err => {
					this.payFail(err)
				}
			})
		},
		
		// 余额支付
		balancePay() {
			// TODO: 调用余额支付接口
			setTimeout(() => {
				this.paySuccess()
			}, 2000)
		},
		
		// 支付成功
		paySuccess() {
			this.paying = false
			uni.showToast({
				title: '支付成功',
				icon: 'success'
			})
			
			// 跳转到支付结果页
			setTimeout(() => {
				uni.redirectTo({
					url: `/pages/order/result?orderId=${this.orderId}&status=success`
				})
			}, 1500)
		},
		
		// 支付失败
		payFail(error) {
			this.paying = false
			console.error('支付失败:', error)
			
			if (error.errMsg && error.errMsg.includes('cancel')) {
				uni.showToast({
					title: '支付已取消',
					icon: 'none'
				})
			} else {
				uni.showToast({
					title: '支付失败，请重试',
					icon: 'none'
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.pay-page {
	background-color: #f5f5f5;
	height: 100vh;
	display: flex;
	flex-direction: column;
}

.nav-header {
	height: 44px;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 15px;
	border-bottom: 1px solid #f0f0f0;
	
	.nav-back {
		padding: 5px;
	}
	
	.nav-title {
		font-size: 16px;
		font-weight: 500;
		color: #333;
	}
	
	.nav-right {
		width: 30px;
	}
}

.pay-content {
	flex: 1;
	
	.amount-section {
		background: linear-gradient(135deg, #27B387 0%, #1e9c6f 100%);
		padding: 30px 15px 20px;
		margin-bottom: 10px;
		
		.amount-info {
			text-align: center;
			margin-bottom: 20px;
			
			.amount-label {
				font-size: 14px;
				color: rgba(255, 255, 255, 0.8);
				display: block;
				margin-bottom: 8px;
			}
			
			.amount-value {
				font-size: 32px;
				font-weight: bold;
				color: #fff;
			}
		}
		
		.order-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.order-no,
			.order-time {
				font-size: 12px;
				color: rgba(255, 255, 255, 0.8);
			}
		}
	}
	
	.payment-section,
	.coupon-section,
	.detail-section,
	.agreement-section,
	.security-section {
		background-color: #fff;
		margin-bottom: 10px;
	}
	
	.payment-section {
		.section-header {
			height: 44px;
			display: flex;
			align-items: center;
			padding: 0 15px;
			border-bottom: 1px solid #f8f8f8;
			
			.header-title {
				font-size: 16px;
				font-weight: 500;
				color: #333;
			}
		}
		
		.payment-list {
			padding: 0 15px;
			
			.payment-item {
				height: 60px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #f8f8f8;
				
				&:last-child {
					border-bottom: none;
				}
				
				&.active {
					background-color: #f8fffe;
				}
				
				.payment-left {
					display: flex;
					align-items: center;
					gap: 12px;
					
					.payment-icon {
						width: 32px;
						height: 32px;
					}
					
					.payment-info {
						.payment-name {
							font-size: 16px;
							color: #333;
							display: block;
							margin-bottom: 2px;
						}
						
						.payment-desc {
							font-size: 12px;
							color: #999;
						}
					}
				}
			}
		}
	}
	
	.coupon-section {
		padding: 0 15px;
		
		.coupon-item {
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.coupon-left {
				display: flex;
				align-items: center;
				gap: 10px;
				
				.coupon-text {
					font-size: 16px;
					color: #333;
				}
			}
			
			.coupon-right {
				display: flex;
				align-items: center;
				gap: 8px;
				
				.coupon-value {
					font-size: 14px;
					color: #ff4757;
					font-weight: 500;
				}
				
				.coupon-placeholder {
					font-size: 14px;
					color: #999;
				}
			}
		}
	}
	
	.detail-section {
		.section-header {
			height: 44px;
			display: flex;
			align-items: center;
			padding: 0 15px;
			border-bottom: 1px solid #f8f8f8;
			
			.header-title {
				font-size: 16px;
				font-weight: 500;
				color: #333;
			}
		}
		
		.detail-list {
			padding: 0 15px 15px;
			
			.detail-item {
				height: 36px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.detail-label {
					font-size: 14px;
					color: #666;
				}
				
				.detail-value {
					font-size: 14px;
					color: #333;
					
					&.discount {
						color: #27B387;
					}
				}
			}
		}
	}
	
	.agreement-section {
		padding: 15px;
		
		.agreement-item {
			display: flex;
			align-items: center;
			gap: 8px;
			
			.agreement-text {
				font-size: 12px;
				color: #666;
			}
			
			.agreement-link {
				font-size: 12px;
				color: #27B387;
			}
		}
	}
	
	.security-section {
		padding: 15px;
		
		.security-header {
			display: flex;
			align-items: center;
			gap: 6px;
			margin-bottom: 10px;
			
			.security-title {
				font-size: 14px;
				color: #333;
				font-weight: 500;
			}
		}
		
		.security-list {
			display: flex;
			flex-wrap: wrap;
			gap: 15px;
			
			.security-item {
				display: flex;
				align-items: center;
				gap: 4px;
				
				.security-text {
					font-size: 12px;
					color: #666;
				}
			}
		}
	}
}

.bottom-pay {
	height: 60px;
	background-color: #fff;
	border-top: 1px solid #f0f0f0;
	display: flex;
	align-items: center;
	padding: 0 15px;
	gap: 15px;
	
	.pay-info {
		flex: 1;
		display: flex;
		align-items: center;
		
		.pay-label {
			font-size: 14px;
			color: #666;
		}
		
		.pay-amount {
			font-size: 20px;
			font-weight: bold;
			color: #ff4757;
		}
	}
	
	.pay-btn {
		height: 44px;
		padding: 0 30px;
		background: linear-gradient(135deg, #27B387 0%, #1e9c6f 100%);
		border: none;
		border-radius: 22px;
		display: flex;
		align-items: center;
		justify-content: center;
		
		&:disabled {
			background: #ccc;
		}
		
		.btn-text {
			font-size: 16px;
			color: #fff;
			font-weight: 500;
		}
	}
}

.coupon-modal {
	height: 100%;
	display: flex;
	flex-direction: column;
	
	.modal-header {
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 15px;
		border-bottom: 1px solid #f0f0f0;
		
		.modal-title {
			font-size: 16px;
			font-weight: 500;
			color: #333;
		}
		
		.modal-close {
			padding: 5px;
		}
	}
	
	.coupon-list {
		flex: 1;
		padding: 15px;
		
		.coupon-option {
			height: 60px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 15px;
			border: 1px solid #f0f0f0;
			border-radius: 8px;
			margin-bottom: 10px;
			
			.option-left {
				display: flex;
				align-items: center;
				gap: 12px;
				
				.option-text {
					font-size: 14px;
					color: #333;
				}
				
				.coupon-card {
					width: 60px;
					height: 40px;
					background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%);
					border-radius: 4px;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					
					.coupon-amount {
						font-size: 14px;
						font-weight: bold;
						color: #fff;
						line-height: 1;
					}
					
					.coupon-condition {
						font-size: 8px;
						color: rgba(255, 255, 255, 0.8);
						line-height: 1;
						margin-top: 2px;
					}
				}
				
				.coupon-info {
					flex: 1;
					
					.coupon-name {
						font-size: 14px;
						color: #333;
						display: block;
						margin-bottom: 4px;
					}
					
					.coupon-expire {
						font-size: 12px;
						color: #999;
					}
				}
			}
		}
	}
}
</style>